<template>
  <div id="webgl-container" ref="containerRef" class="webgl-container">
    <canvas id="webgl" class="webgl"/>
  </div>

  <MoreInfo>
    <p>标准后期处理流程</p>
    <ol>
      <li>设置渲染器：确保WebGLRenderer正确配置</li>
      <li>创建EffectComposer：传入渲染器和可选的 WebGLRenderTarget</li>
      <li>添加RenderPass：这是必须的第一步，用于渲染场景</li>
      <li>添加效果Pass：根据需要添加各种效果Pass</li>
      <li>渲染循环：使用composer.render()代替renderer.render()</li>
    </ol>
    <br>
    <HighlightJS :code="code1"/>
  </MoreInfo>
</template>

<script setup>
import {
  AmbientLight,
  AnimationMixer,
  BoxGeometry,
  Mesh,
  MeshBasicMaterial,
  SphereGeometry
} from 'three'
import { GLTFLoader } from 'three/examples/jsm/Addons'

import HighlightJS from '@/components/HighlightJS.vue'
import MoreInfo from '@/components/MoreInfo.vue'
import { useThree } from '@/hooks/use-three-hook'
import { BLOOM_SCENE, useUnrealBloom } from '@/hooks/use-unreal-bloom-hook'

const code1 = `
  // 1. 创建composer
  const composer = new EffectComposer(renderer);

  // 2. 添加基本渲染通道
  const renderPass = new RenderPass(scene, camera);
  composer.addPass(renderPass);

  // 3. 添加效果通道
  const bloomPass = new UnrealBloomPass(/* 参数 */);
  composer.addPass(bloomPass);

  // 4. 在动画循环中渲染
  function animate() {
    requestAnimationFrame(animate);
    // 使用composer替代renderer
    composer.render();
  }
`

const containerRef = ref(null)
const { scene, camera, renderer, addAnimationCallback, handlePick } = useThree()

const { unrealBloomUpdate } = useUnrealBloom(renderer, scene, camera)

// 创建对象
let cube
let sphere
let mixer
const loader = new GLTFLoader()

// 设置光源
const setupLights = (scene) => {
  // 环境光 - 提供基础照明
  const ambientLight = new AmbientLight(0xffffff, 0.3)
  scene.add(ambientLight)

  return {
    ambientLight
  }
}

const handleClick = (event) => {
  event.preventDefault()
  const intersects = handlePick(event)
  const mesh = intersects.filter((intersect) => intersect.object.isMesh)
  if (mesh.length) {
    mesh[0].object.layers.toggle(BLOOM_SCENE)
  }
}

onMounted(() => {
  if (scene.value && camera.value && renderer.value) {
    setupLights(scene.value)

    // 创建立方体
    const cubeGeometry = new BoxGeometry(1, 1, 1)
    const cubeMaterial = new MeshBasicMaterial({ color: 0x00ff00 })
    cube = new Mesh(cubeGeometry, cubeMaterial)
    cube.position.x = -2
    cube.name = 'cube'
    scene.value.add(cube)

    // 创建球体
    const sphereGeometry = new SphereGeometry(0.5, 32, 32)
    const sphereMaterial = new MeshBasicMaterial({ color: 0xff0000 })
    sphere = new Mesh(sphereGeometry, sphereMaterial)
    sphere.position.x = 2
    sphere.name = 'sphere'
    scene.value.add(sphere)

    // 添加模型
    loader.load('/models/Flamingo.glb', (gltf) => {
      const mesh = gltf.scene
      const s = 0.01
      mesh.scale.set(s, s, s)
      scene.value.add(mesh)

      // 创建动画混合器
      mixer = new AnimationMixer(mesh)
      // 播放第一个动画，设置时长为3秒
      mixer.clipAction(gltf.animations[0]).setDuration(3).play()
    })

    // 添加自定义动画逻辑
    addAnimationCallback((delta, elapsedTime) => {
      // 模型动画
      if (mixer) {
        mixer.update(delta)
      }
    })

    addAnimationCallback(() => {
      unrealBloomUpdate()
    }, true)

    containerRef.value.addEventListener('click', handleClick)
  }
})

onUnmounted(() => {
  containerRef.value?.removeEventListener('click', handleClick)
})
</script>
